<template>
  <div>
    <div class="bg">
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm"  label-position='top'>
      <el-row :gutter="20">
        <el-col :span="8"><div class="grid-content bg-purple">
             <el-form-item label="仓库编码" prop="code">

               <el-input :disabled="true" v-model="ruleForm.code"></el-input>
            </el-form-item>
          </div></el-col>
        <el-col :span="8"><div class="grid-content bg-purple">
             <el-form-item label="仓库名称" prop="name">
               <el-input  placeholder="请输入" v-model="ruleForm.name"></el-input>
            </el-form-item>
          </div></el-col>
        <el-col :span="8"><div class="grid-content bg-purple">
            <el-form-item label="仓库类型" prop="type">
              <el-select v-model="ruleForm.type"  style="width:360px" placeholder="请选择">
                <el-option label="中转仓" value="ZZ"></el-option>
                <el-option label="加工仓" value="JG"></el-option>
                <el-option label="储备仓" value="CB"></el-option>
                <el-option label="冷藏仓" value="LC"></el-option>
              </el-select>
            </el-form-item>
          </div></el-col>
      </el-row>
      <el-row :gutter="20">
         <el-col :span="16"><div class="grid-content bg-purple">
            <el-form-item  label="省/市/区" prop="location">
            <el-cascader
      size="large"
      :options="options"
      v-model="ruleForm.location"
      style="width:806px"
      :props="{ expandTrigger: 'hover',value: 'label' }"
      @change="handleChange">
    </el-cascader>
           </el-form-item>
           </div></el-col>
         <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
      </el-row>
      <el-row :gutter="20">
         <el-col :span="16"><div class="grid-content bg-purple">
            <el-form-item label="详细地址" prop="address">
               <el-input  placeholder="请输入" v-model="ruleForm.address"></el-input>
           </el-form-item>
           </div></el-col>
         <el-col :span="8"><div class="grid-content bg-purple">
           <el-form-item label="仓库状态" prop="status">
             <div>
              <el-radio v-model="radio" label="1">启用</el-radio>
              <el-radio v-model="radio" label="2">停用</el-radio>
             </div>
           </el-form-item>
           </div></el-col>
      </el-row>
      <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="仓库面积" prop="mianji">
            <div>
                <el-input placeholder="请输入" v-model="ruleForm.surface">
                  <template slot="append">m³</template>
                </el-input>
            </div>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="负责人" prop="personName">
            <div>
                 <el-input placeholder="请输入" v-model="ruleForm.personName"> </el-input>
            </div>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item style="width:360px" label="联系电话" prop="phone">
            <div>
                 <el-input placeholder="请输入" v-model="ruleForm.telephone"> </el-input>
            </div>
            </el-form-item>
          </el-col>
      </el-row>
      <hr class="hr">
          <el-form-item style="display: flex;justify-content: center;margin-top:10px">
            <el-button class="back" style="width:170px" round @click.native="$router.push('warehousemanage')">返回</el-button>
             <el-button class="submit"
             style="width:170px;background-color:#ffb200;color:#000"
             round
             type="primary"
             @click.native="submitForm">提交</el-button>

          </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import {next,add} from '@/yuanfeng/Warehouse'
import { regionData,CodeToText } from 'element-china-area-data'
export default {
    data(){
      return {
        options: regionData,
        selectedOptions: [],
        ruleForm: {
          code:'',
          name: '',
          type: '',
          city: '',
          address: '',
          surface: '',
          province:'',
          location:'',
         personName:'',
          telephone: '',
        },
         rules: {
          name: [
            { required: true, message: '请输入仓库名称', trigger: 'blur' },
            { min: 2, max: 5, message: '长度在 2 到 5 个字符', trigger: 'blur' }
          ],
          type: [
            { required: true, message: '请选择仓库类型', trigger: 'change' }
          ],
          address: [
            { type: 'date', required: true, message: '请输入详细地址', trigger: 'change' }
          ],
          status: [
            { type: 'array', required: true, message: '请选择状态', trigger: 'blur' }
          ],
          surface: [
            { required: true, message: '请输入面积', trigger: 'blur' }
          ],
          personName: [
           { message: '请填写负责人', trigger: 'blur' },
            { min: 2, max: 5, message: '长度在 2 到 5 个字符', trigger: 'blur' }
          ],
          phone: [
            { required: true, message: '请填写手机号码', trigger: 'blur' }
          ],
        },
        // 单选框
         radio: '1'
      }
    },
    async created(){
      // console.log(row);
      const {data} = await next()
      // console.log(data.data);
      let code = data.data
      this.ruleForm.code=code
    },
      methods: {
      async submitForm() {
        this.ruleForm.area = this.ruleForm.location[1]
     this.ruleForm.city = this.ruleForm.location[2]
    this.ruleForm.province = this.ruleForm.location[0]
        this.ruleForm.location=`${CodeToText[this.ruleForm.province]}/${CodeToText[this.ruleForm.city]}/${CodeToText[this.ruleForm.area]}`
        console.log(this.ruleForm);
        const res = await add(this.ruleForm)
        console.log(res);
        this.$router.push('warehousemanage')
      },
      backFn(){
        console.log(1);
      },
      handleChange (value) {
        console.log(value)
      }
    }
}
</script>

<style lang="less" scoped>
  .bg{
    width: 1230px;
    height: 509px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 0 6px 0 rgba(144,142,142,.17);
    margin-right: 29px;
    padding-top: 12px;
    padding-left: 10px;
    padding-bottom: 30px;
    box-sizing: border-box;
  }
  /deep/ .el-form-item__label{
    padding: 0 !important;
  }
  /deep/ .el-form-item__label{
    font-size: 12px !important;
  }
  /deep/ .el-input__inner{

    background-color:#f8f5f5;
  }
  /deep/ .el-input-group__append{
    background-color: #e7dfdf;
  }
  .back{
      border: 0px solid #000;
      background-color: #f8f5f5;
    &:hover{
      background-color: #ffb200;
      border: 0px solid #000;
      color: #fff;
    }
  }
  .submit{
      border: 0px solid #000;

     &:hover{
       background-color: #ff8e00 !important;
      border: 0px solid #000;

     }
     .hr {
       background-color: #f5efee !important;
       color: #f5efee !important;
     }
     /deep/ .el-scrollbar.el-cascader-menu{
       height: 200px !important;
     }
  }
</style>
